<style scoped>
.car-offer{
    padding: 15px;
}
.offer-title{
    margin-top: 10px;
    margin-bottom: 10px;
    padding-left: 15px;
    padding-right: 15px;
    height: 35px;
    line-height: 35px;
    background-color: #edf2f6;
}
.offer-link{
    float: right;
    text-decoration: underline;
    color: #fe7203;
}
/* .car-info{
    
} */
.car-info-box{
    display: flex;
    border: 1px solid #ddd;
}
.car-info-box-params{
    width: 135px;
    height: 40px;
    line-height: 40px;
    padding-left: 20px;
    background-color: #f4f4f4;
    border-right: 1px solid #ddd;
}
.car-info-box-value{
    flex: 1;
    overflow: hidden;
    padding-left: 15px;
    line-height: 40px;
}
/* .no-padr{
    border-right: none;
} */
.offer-date{
    background-color: #f4f4f4;
    padding: 15px;
    margin-bottom: 20px;
}
.offer-date-h3{
    padding-left: 15px;
    font-size: 14px;
    line-height: 1;
    position: relative;
}
.offer-date-h3:before{
    content: '';
    position: absolute;
    left: 0;
    top:0;
    bottom:0;
    width:4px;
    background-color:#3db1fa;
}
.offer-date .ivu-form-item,.offer-coverage .ivu-form-item{
    margin-bottom: 0 !important;
}
.offer-date-message{
    color: #ff4335;
}
.offer-date-switch,.offer-coverage-switch{
    text-align: right;
}
.offer-coverage{
    padding: 15px;
    border-bottom: 1px solid #e0e0e0;
}
.offer-result-title{
    margin: 20px 0;
    padding: 15px;
    background-color: #edf2f6;
}
.result-title-company{
    font-weight: bold;
}
.result-title-company img{
    width: 30px;
    height: 30px;
    vertical-align: middle;
    margin-right: 10px;
}
.re-insured-tag{
    display: inline-block;
    vertical-align: middle;
    background-color: #ffa519;
    color: #fff;
    text-align: center;
    padding: 3px 10px;
    font-weight: normal;
    border-radius: 20px;
    margin-left: 50px;
}
.result-title-right{
    text-align: right;
}
.result-title-right-link{
    margin-right: 25px;
}
.offer-result-detail-title{
    padding: 15px;
    background-color: #f4f4f4;
}
.result-detail-type h3{
    position: relative;
    font-weight: normal;  
    padding-left: 15px; 
}
.result-detail-type h3:before{
    content: '';
    position: absolute;
    left: 0;
    top:0;
    bottom:0;
    width:4px;
    background-color:#3db1fa;
}
.result-detail-type-r{
    text-align: right;
    font-weight: bold;
}
.offer-result{
    position: relative;
}
.offer-result-detail-list{
    padding: 15px;
    border-bottom: 1px solid #e0e0e0;
}
.result-detail-list-right{
    text-align: right;
}
.offer-result-detail-money{
    margin: 20ox 0;
    padding: 15px;
    color: #fd4803;
    font-weight: bold;
    font-size: 16px;
}
.offer-result-detail-money b{
    font-size: 20px;
}
.next-step{
    text-align: right;
}
.next-step span{
    display: inline-block;
    padding: 10px 35px;
    background-color: #2ba8f8;
    color: #fff;
    text-align: center;
    border-radius: 60px;
    cursor: pointer;
}
.right-hide-btn{
    float: right;
    margin-right: 25px;
}
.loading-spin-icon-load{
    animation: ani-demo-spin 1s linear infinite;
}
@keyframes ani-demo-spin {
    from { transform: rotate(0deg);}
    50%  { transform: rotate(180deg);}
    to   { transform: rotate(360deg);}
}


.offer-title{
    padding-left: 15px;
    padding-right: 15px;
    height: 35px;
    line-height: 35px;
    background-color: #edf2f6;
}
.car-info{
    padding: 15px;
}
.next-btn{
    text-align: right;
}
.title-right{
    float: right;
}
.brand-left{
    width: 82%;
    margin-right: 3%;

}
.brand-right{
    width:15%;
    padding:0;
    border-radius: 0 2px 2px 0;
}
.scroll-box{
    border: 1px solid #dddee1;
    padding: 16px; 
    cursor: pointer;
    font-size: 14px;
    margin-bottom: 5px;
}


</style>

<style>
.common-car-title{
    border-bottom:1px solid #f2f2f2;
    overflow: hidden;
    padding:10px 0;
}
.common-car-title h3{
    position: relative;
    display: inline-block;
    font-size:16px;
    padding-left:15px;
}
.common-car-title h3:before{
    content:'';
    position: absolute;
    left: 0;
    top:0;
    bottom:0;
    width:3px;
    background-color:#3db1fa;
}
.common-title-r{
    width : 250px;
    float: right;
}

</style>

<template>
    <div>
        <product-title></product-title>
        <div class="car-offer">
            <div class="common-car-title">
                <h3>车辆报价</h3>
                <div class="common-title-r">
                    <Steps :current="2" size="small">
                        <Step title=""></Step>
                        <Step title=""></Step>
                        <Step title=""></Step>
                        <Step title=""></Step>
                        <Step title=""></Step>
                    </Steps>
                </div>
            </div>
            <div class="offer-title">
                车辆信息
                <a class="offer-link" @click="openModal">已换车？点击修改车型</a>
                <a class="right-hide-btn" @click="carInfoShow">折叠详情</a>
            </div>
            <div class="car-info" v-show="carInfoTag">
                <Row>
                    <Col span="12">
                        <div class="car-info-box">
                            <div class="car-info-box-params">车牌号</div>
                            <div class="car-info-box-value">{{stateCarinfo.licenseNo}}</div>
                        </div>
                    </Col>
                    <Col span="12">
                        <div class="car-info-box">
                            <div class="car-info-box-params">品牌型号</div>
                            <div class="car-info-box-value">{{stateCarinfo.brandName}}</div>
                        </div>
                    </Col>
                    <Col span="12">
                        <div class="car-info-box">
                            <div class="car-info-box-params">车架号</div>
                            <div class="car-info-box-value">{{stateCarinfo.frameNo}}</div>
                        </div>
                    </Col>
                    <Col span="6">
                        <div class="car-info-box">
                            <div class="car-info-box-params">发动机号</div>
                            <div class="car-info-box-value">{{stateCarinfo.engineNo}}</div>
                        </div>
                    </Col>
                    <Col span="6">
                        <div class="car-info-box">
                            <div class="car-info-box-params">登记日期</div>
                            <div class="car-info-box-value">{{stateCarinfo.firstRegisterDate}}</div>
                        </div>
                    </Col>
                </Row>                                    
            </div>
            <div class="offer-title">
                险种信息
                <!-- <a class="offer-link">险种知多少？</a> -->
                <a class="right-hide-btn" @click="coverageShow">折叠详情</a>
            </div>
            <Form label-position="left" v-show="coverageTag">
                <div class="offer-date">
                    <Row type="flex"  align="middle">
                        <Col span="3">
                            <h3 class="offer-date-h3">交强险</h3>
                        </Col>
                        <Col span="8">
                            <FormItem label="起保日期：">
                                <DatePicker type="datetime" v-model="ciBeginDatetime" @on-change="dateChange($event,'','ciBeginDate')" placeholder="" ></DatePicker>
                            </FormItem>
                        </Col>
                        <!-- <Col span="3">
                            <Checkbox>&nbsp;&nbsp;即时生效</Checkbox>
                        </Col> -->
                        <!-- <Col span="7" class="offer-date-message">
                            *交强险在90天外，建议不投保
                        </Col> -->
                        <Col span="13" class="offer-date-switch">
                            <Switch  v-model="ciStartDateFlag"></Switch>
                        </Col>
                    </Row>
                </div> 
                <!-- <div class="offer-date">
                    <Row type="flex"  align="middle">
                        <Col span="3">
                            <h3 class="offer-date-h3">车船险</h3>
                        </Col>
                        <Col span="7">
                            <FormItem label="凭证号：" :label-width="100">
                                <Input  placeholder=""></Input>
                            </FormItem>
                        </Col>
                        <Col span="10" offset="1">
                            <FormItem label="凭证机关：" :label-width="100">
                                <Input  placeholder=""></Input>
                            </FormItem>
                        </Col>
                        <Col span="2" offset="1">
                            <Select  placeholder="" transfer>
                                <Option value="免税车">免税车</Option>
                            </Select>
                        </Col>
                    </Row>
                </div>  -->
                <div class="offer-date">
                    <Row type="flex"  align="middle">
                        <Col span="3">
                            <h3 class="offer-date-h3">商业险</h3>
                        </Col>
                        <Col span="8">
                            <FormItem label="起保日期：">
                                 <DatePicker type="datetime" v-model="biBeginDatetime" @on-change="dateChange($event,'','biBeginDate')"  placeholder="" ></DatePicker>
                            </FormItem>
                        </Col>
                        <!-- <Col span="3">
                            <Checkbox>&nbsp;&nbsp;即时生效</Checkbox>
                        </Col> -->
                        <!-- <Col span="7" class="offer-date-message">
                            *交强险在90天外，建议不投保
                        </Col> -->
                        <!-- <Col span="13" class="offer-date-switch">
                            <Switch v-model="biStartDateFlag"></Switch>
                        </Col> -->
                    </Row>
                </div> 
            </Form> 
            <Form v-show="coverageTag">
                <div class="offer-coverage" v-for="(item,index) in filterCoverage" :key="item.coverageCode">
                    <Row type="flex"  align="middle">
                        <Col :span="item.insuredAmount == 'Y'||item.insuredAmount == 'N' ? 11 : 3">
                           {{item.coverageName}}
                        </Col>
                        <Col span="7" v-if="item.insuredAmount != 'Y'&&item.insuredAmount != 'N' ">
                            <FormItem label="保额：" :label-width="100">
                                <Select v-model="item.insuredAmount"  placeholder="" transfer :disabled="!item.choose" >
                                    <Option :value="sitem" v-for="sitem in item.insuredArray" :key="sitem">{{sitem}}</Option>
                                </Select>
                            </FormItem>
                        </Col>
                        <Col span="3" v-if="MCoverage[('M'+item.coverageCode)]&&item.choose" :offset="item.insuredAmount == 'Y'||item.insuredAmount == 'N' ? 0 : 1">
                            <Checkbox  v-model="MCoverage[('M'+item.coverageCode)].choose" @on-change="MswitchChange($event,('M'+item.coverageCode))">&nbsp;&nbsp;不计免赔</Checkbox>
                        </Col>
                        <Col span="6" v-if="item.flag&&item.choose">
                            <RadioGroup v-model="item.flag" @on-change="flagChange($event,index)">
                                <Radio label="1" >国产玻璃</Radio>
                                <Radio label="2" >进口玻璃</Radio>
                            </RadioGroup>
                        </Col>
                        <Col :span="MCoverage[('M'+item.coverageCode)]&&item.choose ? 10 :(item.insuredAmount != 'Y'&&item.insuredAmount != 'N'&&!item.choose ? 14: (item.flag&&item.choose ? 7: 13)) " class="offer-coverage-switch">
                            <Switch  v-model="item.choose" @on-change="switchChange($event,index)"></Switch>
                        </Col>
                    </Row>
                </div>
            </Form>
            <div class="offer-result">
                <!-- <Spin size="large" fix ></Spin> -->
                <Spin fix v-if="spinShow">
                    <Icon type="load-c" size=18 class="loading-spin-icon-load"></Icon>
                    <div>Loading</div>
                </Spin>
                <div v-for="(item,index) in insurersList" :key="item.insurerCode">               
                    <div class="offer-result-title">
                        <Row type="flex"  align="middle">
                            <Col span="12" class="result-title-company">
                                <!-- <img src="../../asset/img/com_logo.jpg" />  -->
                                {{item.insurerName}}
                                <span v-if="item.renewInfo" class="re-insured-tag">续保</span>
                            </Col>
                            <Col span="12" class="result-title-right">
                                <a class="result-title-right-link" @click="resultShow(index)">{{item.itemText}}</a>
                                <Switch v-model="item.choose" @on-change="goOfffer($event,index)"></Switch>
                            </Col>
                        </Row>
                    </div>
                    <div class="offer-result-detail" v-if="results[index]" v-show="results[index].resultTag">
                        <div v-if="results[index].ciPremium > 0">
                            <div class="offer-result-detail-title">
                                <Row type="flex"  align="middle">
                                    <Col span="12" class="result-detail-type">
                                        <h3>交强险</h3>
                                    </Col>
                                    <Col span="12" class="result-detail-type-r">
                                        ￥{{((results[index].ciPremium *100 + results[index].carshipTax * 100)/100).toFixed(2)}}
                                    </Col>
                                </Row>
                            </div>
                            <div class="offer-result-detail-list">
                                <Row type="flex"  align="middle">
                                    <Col span="12">
                                        生效日期
                                    </Col>
                                    <Col span="12" class="result-detail-list-right">
                                        {{results[index].ciBeginDate}}
                                    </Col>
                                </Row>
                            </div>
                            <div class="offer-result-detail-list">
                                <Row type="flex"  align="middle">
                                    <Col span="12">
                                        交强险
                                    </Col>
                                    <Col span="12" class="result-detail-list-right">
                                        ￥{{results[index].ciPremium}}
                                    </Col>
                                </Row>
                            </div>
                            <div class="offer-result-detail-list">
                                <Row type="flex"  align="middle">
                                    <Col span="12">
                                        车船税
                                    </Col>
                                    <Col span="12" class="result-detail-list-right">
                                        ￥{{results[index].carshipTax}}
                                    </Col>
                                </Row>
                            </div>
                        </div>
                        <div v-if="results[index].biPremium > 0">
                            <div class="offer-result-detail-title">
                                <Row type="flex"  align="middle">
                                    <Col span="12" class="result-detail-type">
                                        <h3>商业险</h3>
                                    </Col>
                                    <Col span="12" class="result-detail-type-r">
                                        ￥{{results[index].biPremium}}
                                    </Col>
                                </Row>
                            </div>
                            <div class="offer-result-detail-list">
                                <Row type="flex"  align="middle">
                                    <Col span="12">
                                        生效日期
                                    </Col>
                                    <Col span="12" class="result-detail-list-right">
                                        {{results[index].biBeginDate}}
                                    </Col>
                                </Row>
                            </div>
                            <div class="offer-result-detail-list" v-for="(sitem,sindex) in results[index].coverageList">
                                <Row type="flex" justify="space-between"  align="middle">
                                    <Col span="12">
                                        {{sitem.coverageName}}
                                    </Col>
                                    <Col span="6" class="result-detail-list-right" v-if="sitem.insuredAmount != 'Y'&&sitem.insuredAmount != 'N' ">
                                        保额：￥{{sitem.amount}}
                                    </Col>
                                    <Col span="6" class="result-detail-list-right">
                                        ￥{{sitem.insuredPremium}}
                                    </Col>
                                </Row>
                            </div>
                        </div>
                        <div class="offer-result-detail-money" v-if="results[index].errorCode">
                            <Row type="flex"  align="middle">
                                <Col span="12">
                                    积分：<b>{{results[index].integral}}</b>
                                </Col>
                                <Col span="12" class="result-detail-list-right">
                                    总保费：<b>{{((results[index].ciPremium *100 + results[index].carshipTax * 100 + results[index].biPremium *100)/100).toFixed(2)}}</b>元
                                </Col>
                            </Row>
                        </div>
                        <div>{{results[index].errorInfo}}</div>
                        <Row v-if="results[index].errorCode">
                            <Col span="24" class="next-step">
                                <span @click="toSend(index)">立即投保</span>
                            </Col>
                        </Row>
                    </div>
                </div>
            </div>           
        </div>
        <Modal
            v-model="carModal"
            title="车辆信息"
             width="1200" :mask-closable = 'false'>
            <div class="car-info common-box-body">
                <Form :model="carInfo" ref="carInfo" :rules="ruleValidate">
                    <Row>
                        <Col span="12">
                            <FormItem label="车架号" prop="frameNo">
                                <Input v-model="carInfo.frameNo" @on-change="frameNoChange" placeholder=""></Input>
                            </FormItem>
                        </Col>
                        <Col span="12">
                            <FormItem label="发动机号" prop="engineNo">
                                <Input v-model="carInfo.engineNo" @on-change="engineNoChange" placeholder=""></Input>
                            </FormItem>
                        </Col>
                        <Col span="12">
                            <FormItem label="品牌型号" prop="brandCode">
                                <Select transfer  class="brand-left"  size="large" v-model="carInfo.brandCode" label-in-value @on-change="brandCodeChange"  placeholder="请选择">
                                    <Option :value="item.brandCode" v-for="item in carType" :key="item.brandCode" :label="item.standardName+item.engineDesc+item.parentVehName">
                                        <span>{{item.standardName}}{{item.engineDesc}}{{item.parentVehName}}{{item.familyName}}{{item.seat}}座</span>
                                        <span style="display:block;color:#999">新车购置价：{{item.newCarPrice}}</span>
                                    </Option>                            
                                </Select><Button class="brand-right" @click="openBrandModal"  type="primary">选择</Button>  
                            </FormItem>
                        </Col>
                        <Col span="12">
                            <FormItem label="登记日期" prop="firstRegister">
                                <DatePicker type="date" v-model="carInfo.firstRegister" @on-change="dateChange($event,carInfo,'firstRegisterDate')" placeholder="请选择登记日期"></DatePicker>
                            </FormItem>
                        </Col>
                        <Col span="12">
                            <FormItem label="是否一年内过户" prop="isTrans">
                                <Select  size="large" v-model="carInfo.isTrans"   placeholder="请选择">
                                    <Option value="1">是</Option>
                                    <Option value="0">否</Option>                              
                                </Select>
                            </FormItem>
                        </Col>
                        <Col span="12" v-if="isTrans">
                            <FormItem label="过户日期" prop="trans">
                                <DatePicker type="date"  v-model="carInfo.trans" @on-change="dateChange($event,carInfo,'transDate')" placeholder="请选择过户日期"></DatePicker>
                            </FormItem>
                        </Col>
                    </Row>
                </Form> 
                <Form :model="carInfo" ref="owner" :rules="ruleValidate">
                    <Row> 
                        <Col span="8">
                            <FormItem label="车主姓名" prop="ownerName">
                                <Input v-model="carInfo.ownerName" placeholder=""></Input>
                            </FormItem>
                        </Col>
                        <Col span="8">
                            <FormItem label="车主身份证" prop="ownerID">
                                <Input v-model="carInfo.ownerID" placeholder=""></Input>
                            </FormItem>
                        </Col>
                        <Col span="8">
                            <FormItem label="车主手机号" prop="ownerMobile">
                                <Input v-model="carInfo.ownerMobile" placeholder=""></Input>
                            </FormItem>
                        </Col>
                    </Row>    
                    <!-- <Row>
                        <Col span="12" offset="6">
                            <Button type="primary" long size="large" @click="caridSend()">下一步</Button>
                        </Col>
                    </Row>                     -->
                </Form> 
            </div>
            <div class="offer-title" >
                投保人信息
                <div class="title-right">
                    <Checkbox @on-change="applicantChange">同车主</Checkbox>
                </div>
            </div> 
            <div class="car-info common-box-body">
                <Form :model="applicant" ref="applicant" :rules="ruleValidate">
                    <Row>
                        <Col span="8">
                            <FormItem label="姓名" prop="applicantName">
                                <Input v-model="applicant.applicantName" placeholder=""></Input>
                            </FormItem>
                        </Col>
                        <Col span="8">
                            <FormItem label="身份证" prop="applicantID">
                                <Input v-model="applicant.applicantID" placeholder=""></Input>
                            </FormItem>
                        </Col>
                        <Col span="8">
                            <FormItem label="手机号" prop="applicantMobile">
                                <Input v-model="applicant.applicantMobile" placeholder=""></Input>
                            </FormItem>
                        </Col>
                    </Row>
                </Form>
            </div>
            <div class="offer-title">
                被保人信息
                <div class="title-right">
                    <Checkbox @on-change="insuredChange">同车主</Checkbox>
                </div>
            </div> 
            <div class="car-info common-box-body">
                <Form :model="insured" ref="insured" :rules="ruleValidate">
                    <Row>
                        <Col span="8">
                            <FormItem label="姓名" prop="insuredName">
                                <Input v-model="insured.insuredName" placeholder=""></Input>
                            </FormItem>
                        </Col>
                        <Col span="8">
                            <FormItem label="身份证" prop="insuredID">
                                <Input v-model="insured.insuredID" placeholder=""></Input>
                            </FormItem>
                        </Col>
                        <Col span="8">
                            <FormItem label="手机号" prop="insuredMobile">
                                <Input v-model="insured.insuredMobile" placeholder=""></Input>
                            </FormItem>
                        </Col>
                    </Row>
                </Form>
            </div>
            <div slot="footer">
                <Row class="next-btn">
                    <Col span="3" offset="15">
                        <Button long type="primary" size="large" shape="circle" @click="carInfoOk">确定</Button>                    
                    </Col>
                    <Col span="3" offset="1">
                        <Button long type="ghost" size="large" shape="circle" @click="carInfoCancel">取消</Button>
                    </Col>
            </Row> 
            </div>
        </Modal>
        <Modal v-model="brandModal" title="选择车型" width="800">
            <div class="common-box-body">
                <div class="import-search">
                    <Input v-model="brandInput"  placeholder="请输入车型关键字" class="brand-input">
                        <Button slot="append" @click="brandSearch" icon="ios-search"></Button>
                    </Input>
                </div>
            </div>
            <!-- <Table :columns="brandHead" :data="brandList" class="brand-table" :show-header='false'></Table> -->
            <Scroll :on-reach-bottom="handleReachBottom" :distance-to-edge="-50">
                <div class="scroll-box" v-for="(item, index) in brandList" :key="index" @click="chooseBrand(index)">
                   <span>{{item.standardName}}{{item.engineDesc}}{{item.parentVehName}}{{item.familyName}}{{item.seat}}座</span>
                   <span style="float:right;color:#999">新车购置价：{{item.newCarPrice}}</span>
                </div>
            </Scroll>
            <div slot="footer">
                
            </div>
        </Modal> 
    </div>
</template>
<script>
import productTitle from '../../components/productTitle'
import city2 from '../../asset/js/city2'
import {  risks , insurers , getAreas, effectiveDate , exactnessQuote , renewInfo , modelExactness , modelMistiness} from '../../api/api'
export default {
    data () {
        return {
            spinShow: false,
            coverageList:[],
            filterCoverage:[],
            MCoverage:{},
            ciBeginDatetime:'',
            ciBeginDate:'',
            biBeginDatetime:'',
            biBeginDate:'',
            ciStartDateFlag:false,
            results:[],
            insurersList:[],
            carInfoTag:true,
            coverageTag:true,
            carModal:false,
            carInfo:{

            },
            insured:{
                insuredName:'',
                insuredMobile:'',
                insuredID:''
            },
            applicant:{
                applicantName:'',
                applicantMobile:'',
                applicantID:''
            },
            carType:[],
            brandModal:false,
            brandHead:[
                    {
                        title: '车型',
                        key: 'brandName',
                        render:(h,params)=>{
                            return h('div',{
                            },params.row.standardName+params.row.engineDesc+params.row.parentVehName+params.row.familyName+params.row.seat+'座')
                        }
                    },
                    {
                        title: '新车购置价',
                        key: 'newCarPrice',
                        width:'200',
                        render:(h,params)=>{
                            return h('div',{
                            },'新车购置价：'+params.row.newCarPrice)
                        }
                    },
            ],
            brandList:[],
            brandInput:'',
            page:1,
            ruleValidate:{
                frameNo: [
                    { required: true, message: '请正确填写车架号',pattern: /^[A-Z0-9*]{17}$/, trigger: 'blur' }  //   
                ],
                engineNo: [
                    { required: true, pattern: /^[A-Za-z0-9*]*$/, message: '请正确填写发动机号', trigger: 'blur' }
                ],
                brandCode: [
                    { required: true, message: '请选择品牌型号', trigger: 'change' }
                ],
                firstRegister: [
                    { required: true, type: 'date', message: '请选择登记日期', trigger: 'change' }
                ],
                isTrans: [
                    { required: true, message: '请选择是否一年内过户', trigger: 'change' }
                ],
                trans: [
                    { required: true, type: 'date', message: '请选择过户日期', trigger: 'change' }
                ],
                ownerName:[
                    { required: true, message: '请正确填写车主姓名', trigger: 'blur' }
                ],
                ownerID:[
                    { required: true,pattern:  /(^\d{15}$)|(^\d{17}(\d|X)$)/ , message: '请正确填写车主身份证号', trigger: 'blur' }
                ],
                ownerMobile:[
                    { required: true, pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: '请正确填写车主手机号', trigger: 'blur' }   // 
                ],
                applicantName:[
                    { required: true, message: '请正确填写投保人姓名', trigger: 'blur,change' }
                ],
                applicantID:[
                    { required: true,pattern:  /(^\d{15}$)|(^\d{17}(\d|X)$)/ , message: '请正确填写投保人身份证号', trigger: 'blur,change' }
                ],
                applicantMobile:[
                    { required: true, pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: '请正确填写投保人手机号', trigger: 'blur,change' }
                ],
                insuredName:[
                    { required: true, message: '请正确填写被保人姓名', trigger: 'blur,change' }
                ],
                insuredID:[
                    { required: true,pattern:  /(^\d{15}$)|(^\d{17}(\d|X)$)/ ,  message: '请正确填写被保人身份证号', trigger: 'blur,change' }
                ],
                insuredMobile:[
                    { required: true, pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: '请正确填写被保人手机号', trigger: 'blur,change' }
                ],
            },
            renewInfodata:{},
            insurersListArry:[]
        }
    },
    components: {
        productTitle
    },
    computed: {
        provinceCode(){
            return this.$store.state.carinfo.provinceCode
        },
        stateCarinfo(){
             return this.$store.state.carinfo
        },
        isTrans(){
            return this.carInfo.isTrans == 1 ? true : false
        },
        carTypeArray(){
            return this.$store.state.cartype
        }
    },
    mounted () {
        this.getCoverage().then(()=>{
            if(this.stateCarinfo.licenseNo){
                this.getRenewInfo()
            }
        })
        this.getCompany()
        this.geteffectiveDate()
        this.getArea()     
    },
    methods: {
        openModal(){
            this.carModal = !this.carModal
            let _carinfo = Object.assign({},this.stateCarinfo) 
            delete _carinfo.applicantID
            delete _carinfo.applicantMobile
            delete _carinfo.applicantName
            delete _carinfo.insuredID
            delete _carinfo.insuredMobile
            delete _carinfo.insuredName
            this.carInfo = Object.assign({},this.carInfo,_carinfo)
            console.log(this.stateCarinfo.applicantID)
            let _car_info = this.stateCarinfo
            this.applicant.applicantID = _car_info.applicantID
            this.applicant.applicantMobile = _car_info.applicantMobile
            this.applicant.applicantName = _car_info.applicantName
            this.insured.insuredID = _car_info.insuredID
            this.insured.insuredMobile = _car_info.insuredMobile
            this.insured.insuredName = _car_info.insuredName
            this.carType = this.carTypeArray
        },
        chooseBrand(index){
            console.log(this.brandList[index])
            this.carType.push(this.brandList[index])
            this.carInfo.brandCode = this.brandList[index].brandCode
            this.carInfo.brandName = this.brandList[index].standardName+this.brandList[index].engineDesc+this.brandList[index].parentVehName
            this.brandModal = !this.brandModal
        },
        brandSearch(){
            this.page = 1
            let _params = {
                brandName:this.brandInput,
                page:this.page,
            }
            new Promise((resolve, reject) => {
                modelMistiness(_params).then(response => {
                    console.log(response.data)
                    if(response.data.state == 1){
                        this.brandList = response.data.data
                    }else{

                    }
                    resolve();
                }).catch(error => {
                    reject(error);
                });
            });
        },
        handleReachBottom(){
            this.page++ 
            let _params = {
                brandName:this.brandInput,
                page:this.page,
            }
            return new Promise(resolve => {
                new Promise((resolve, reject) => {
                    modelMistiness(_params).then(response => {
                        console.log(response.data)
                        if(response.data.state == 1){
                            setTimeout(() => {
                                this.brandList =  this.brandList.concat(response.data.data)
                            }, 5000);
                        }else{

                        }
                        resolve();
                    }).catch(error => {
                        reject(error);
                    });
                });
            })
        },
        brandCodeChange(item){
            console.log(item)
            if(item.label){
                this.carInfo.brandName = item.label
            }
            
        },
        openBrandModal(){
            this.brandModal = !this.brandModal
        },
        dateChange(val,obj,attr){
                obj[attr] = val;
                console.log(obj[attr]);
        },
        applicantChange(e){
            if(e){
                this.applicant.applicantName = this.carInfo.ownerName
                this.applicant.applicantMobile = this.carInfo.ownerMobile
                this.applicant.applicantID = this.carInfo.ownerID               
            }else{
                 this.applicant.applicantName = ''
                 this.applicant.applicantMobile = ''
                 this.applicant.applicantID = ''
            }
        },
        insuredChange(e){
            if(e){
                this.insured.insuredName = this.carInfo.ownerName
                this.insured.insuredMobile = this.carInfo.ownerMobile
                this.insured.insuredID = this.carInfo.ownerID
            }else{
                this.insured.insuredName = ''
                this.insured.insuredMobile = ''
                this.insured.insuredID = ''
            }
        },
        frameNoChange(){
            if(this.carInfo.frameNo != this.stateCarinfo.frameNo){
                this.carInfo.responseNo = ''
            }else{
                this.carInfo.responseNo = this.stateCarinfo.responseNo
            }  
        },
        engineNoChange(){
            if(this.carInfo.engineNo != this.stateCarinfo.engineNo){
                this.carInfo.responseNo = ''
            }else{
                this.carInfo.responseNo = this.stateCarinfo.responseNo
            }   
        },
        carInfoOk(){
            let successtag = 0
            let formarry = ['carInfo','owner','applicant','insured']
            for(var i=0;i<formarry.length;i++){
                this.$refs[formarry[i]].validate((valid) => {
                if (valid) {                       
                    } else {
                        successtag++
                    }
                })
            }
            if(successtag == 0){
                this.carInfo.engineNo = this.carInfo.engineNo.toUpperCase()
                let _allInfo = Object.assign(this.carInfo,this.insured,this.applicant)
                this.$store.dispatch('changeCarInfo',_allInfo)
                this.$store.dispatch('changeCarType',this.carType)
                this.$router.push({name:'offer_detail'})
                this.carModal = false;
                this.results = []
                this.getCompany()
                if(this.stateCarinfo.licenseNo){
                    if( this.renewInfodata.insurerCode){
                        let _insurerCode = this.renewInfodata.insurerCode
                        this.insurersList.forEach((item,index)=>{
                            if(item.insurerCode == _insurerCode){
                                let _arry = this.insurersList[index]
                                this.insurersList.splice(index,1)
                                this.insurersList.unshift(_arry)
                                this.insurersList[0].renewInfo = true
                                this.insurersList[0].choose = true 
                                this.goOfffer(true,0)
                            }
                        })
                    }                    
                }
            }else{
                this.$Message.error('请完善车辆信息！')
                this.carModal = true;
            }
        },
        carInfoCancel(){
            this.carModal = false;
        },
        toSend(index){
            let _obj = {}
            _obj.insurerCode = this.results[index].insurerCode
            _obj.bizID = this.results[index].bizID
            _obj.channelCode = this.results[index].channelCode
            _obj.insurerName = this.insurersList[index].insurerName
            this.$store.dispatch('changeCarInfo',_obj) 
            this.$store.dispatch('changeCarQuote',this.results[index]) 
            this.$router.push({'name':'send_info'})          
        },
        //续保信息接口
        getRenewInfo(){                                             
            let _params = {
                licenseNo:this.stateCarinfo.licenseNo
            }
            new Promise((resolve, reject) => {
                renewInfo(_params).then(response => {
                    console.log(response.data)
                    if(response.data.state == 1){
                        this.renewInfodata  = response.data.data
                        let _data = response.data.data.renewItemKindList
                        for(var j=0;j<_data.length;j++){
                            for(var i=0;i<this.filterCoverage.length;i++){
                                if(this.filterCoverage[i].coverageCode == _data[j].riskCode){
                                    this.filterCoverage[i].choose = true
                                    if(this.filterCoverage[i].insuredArray){
                                        if(!_data[j].amount){
                                            this.filterCoverage[i].insuredAmount = this.filterCoverage[i].insuredArray[0]
                                        }else{
                                            this.filterCoverage[i].insuredAmount = _data[j].amount
                                        }    
                                    }
                                }else{
                                    // this.filterCoverage[i].choose = false
                                    // if(this.filterCoverage[i].insuredArray){
                                    //     this.filterCoverage[i].insuredAmount = 0.00
                                    // }else{
                                    //     this.filterCoverage[i].insuredAmount = 'Y'
                                    // }    
                                }
                            }
                            let _name = 'M'+_data[j].riskCode
                            if(this.MCoverage[_name]){
                                this.MCoverage[_name].choose = true
                                this.MCoverage[_name].insuredAmount = 'Y'
                            }
                        }
                        let _insurerCode = response.data.data.insurerCode
                        this.insurersList.forEach((item,index)=>{
                            if(item.insurerCode == _insurerCode){
                                let _arry = this.insurersList[index]
                                this.insurersList.splice(index,1)
                                this.insurersList.unshift(_arry)
                                this.insurersList[0].renewInfo = true
                                this.insurersList[0].choose = true 
                                this.goOfffer(true,0)
                            }
                        })
                    }else{

                    }
                    resolve();
                }).catch(error => {
                    reject(error);
                });
            });
        },
        //报价详情隐藏显示
        resultShow(index){
            if(this.insurersList[index].itemText == '折叠隐藏'){
                this.insurersList[index].itemText = '展开详情'
            }else{
                this.insurersList[index].itemText = '折叠隐藏'
            }
            console.log(index)
            if(this.results[index]){
                console.log(this.results[index].resultTag)
                this.results[index].resultTag = !this.results[index].resultTag
            }
        },
        //车辆信息隐藏显示
        carInfoShow(){
            this.carInfoTag = !this.carInfoTag
        },
        //险种信息隐藏显示
        coverageShow(){
            this.coverageTag = !this.coverageTag
        },
        flagChange(value,index){
            console.log(value,index)
            let _obj = this.filterCoverage[index]
            this.filterCoverage[index].flag = value
             this.$set(this.filterCoverage,index,_obj)
        },
        //报价
        goOfffer(value,index){
            if(value){
                if(!this.results[index]||this.results[index].errorCode == 0){
                    let _obj = {
                        cityCode:this.stateCarinfo.cityCode,
                        responseNo:this.stateCarinfo.responseNo,
                        biBeginDate:this.biBeginDate            
                    }
                    let _carinfo = {
                        licenseNo:this.stateCarinfo.licenseNo,
                        frameNo:this.stateCarinfo.frameNo,
                        brandCode:this.stateCarinfo.brandCode,
                        engineNo:this.stateCarinfo.engineNo,
                        isTrans:this.stateCarinfo.isTrans,
                        firstRegisterDate:this.stateCarinfo.firstRegisterDate,    
                    }
                    //如果是过户车 需要过户日期
                    if(this.stateCarinfo.isTrans == 1){
                        _carinfo.transDate = this.stateCarinfo.transDate
                    }
                    let _personInfo = {
                        ownerName:this.stateCarinfo.ownerName,
                        ownerID:this.stateCarinfo.ownerID,
                        ownerMobile:this.stateCarinfo.ownerMobile,
                        insuredName:this.stateCarinfo.insuredName,
                        insuredID:this.stateCarinfo.insuredID,
                        insuredMobile:this.stateCarinfo.insuredMobile,
                        applicantName:this.stateCarinfo.applicantName,
                        applicantID:this.stateCarinfo.applicantID,
                        applicantMobile:this.stateCarinfo.applicantMobile
                    }
                    let _vlist = [].concat(this.filterCoverage)
                    for(var key in this.MCoverage){
                        _vlist.push(this.MCoverage[key])
                    }
                    const _list = []
                    _vlist.forEach(item =>{
                        if(item.choose && item.choose == true){
                            _list.push(item)
                        }
                    })
                    if(this.ciStartDateFlag){
                        _obj.ciBeginDate = this.ciBeginDate
                        _list.push(
                            {
                                "coverageCode": "FORCEPREMIUM",
                                "coverageName": "交强险",
                                "insuredAmount": "Y"
                            }
                        )                
                    }
                    console.log(_vlist)
                    console.log(_list)
                    _obj.carInfo = _carinfo
                    _obj.personInfo = _personInfo
                    _obj.coverageList = _list
                    console.log(_obj)
                    _obj.insurerCode = this.insurersList[index].insurerCode
                    _obj.thpBizID = '412723198904203060'
                    this.spinShow = true
                    new Promise((resolve, reject) => {
                        exactnessQuote(_obj).then(response => {
                            console.log(response.data)
                            if(response.data.state == 1){
                                let _array = []
                                 response.data.data[0].coverageList.forEach(item =>{
                                     if(item.coverageCode != 'FORCEPREMIUM'){
                                         _array.push(item)
                                     }
                                 })
                                this.results[index] = response.data.data[0]
                                this.results[index].coverageList = _array
                                this.results[index].resultTag = true
                                this.results[index].errorInfo = ''
                                this.results[index].errorCode = 1
                                this.$set(this.results,index,response.data.data[0])
                            }else{
                                this.results[index] = {}
                                this.results[index].errorCode = 0
                                this.results[index].resultTag = true
                                this.results[index].errorInfo = response.data.msg
                            }
                            this.spinShow = false
                            resolve();
                        }).catch(error => {
                            this.spinShow = false
                            reject(error);
                        });
                    });
                }    
            }
        },
        MswitchChange(value,name){
            console.log(value,'不计免赔')
            if(value){
                this.MCoverage[name].insuredAmount = 'Y'
            }else{
                this.MCoverage[name].insuredAmount = 'N'
            }
        },
        switchChange(value,index){
            console.log(value,index)
            this.results = []           
            this.insurersList.forEach((item,index)=>{
                item.choose = false
            })
            if(this.filterCoverage[index].parent&&value){
                let _length = this.filterCoverage.length
                let _parent = this.filterCoverage[index].parent
                let _tag = 0
                for(var i=0;i<_length;i++){
                    if(this.filterCoverage[i].coverageCode == _parent){
                        if(this.filterCoverage[i].choose == false){
                            _tag++
                        }
                        break 
                    }
                }
                if(_tag > 0){
                    this.$Message.error('当前险种组合下，此险种不可投保！')
                    let _obj = this.filterCoverage[index]
                    _obj.choose = true
                    let _that = this
                    this.$nextTick(() => {
                        setTimeout(() => {
                            _obj.choose = false
                            this.$set(this.filterCoverage,index,_obj)
                        },200)
                    })
                    return false
                }
            }

            if(this.filterCoverage[index].insuredAmount == 'Y' || this.filterCoverage[index].insuredAmount == 'N'){
                let _tag = value ? 'Y' : 'N'
                //this.filterCoverage[index].insuredAmount = _tag
                let _obj = this.filterCoverage[index]
                _obj.insuredAmount = _tag
                if(this.filterCoverage[index].coverageCode == 'F'){
                    if(value){
                        this.filterCoverage[index].flag = '1'
                    }else{
                        this.filterCoverage[index].flag = null
                    }
                }
                this.$set(this.filterCoverage,index,_obj)

            }else{
                let _obj = this.filterCoverage[index]
                _obj.choose = value
                if(!value){
                    _obj.insuredAmount = 0.00
                }else{
                    _obj.insuredAmount = this.filterCoverage[index].insuredArray[0]
                }
                this.$set(this.filterCoverage,index,_obj)
            }

            if(!value){
                let _name = this.filterCoverage[index].coverageCode
                if(this.MCoverage[('M'+_name)]){
                    let _obj =  this.MCoverage[('M'+_name)]
                    _obj.choose = false
                    _obj.insuredAmount = 'N'
                    this.$set(this.MCoverage,('M'+_name),_obj)    
                }
                if(this.filterCoverage[index].coverageCode == 'A'){
                    const _list = this.filterCoverage.map(item=>{
                        if(item.parent&&item.parent == 'A'){
                            item.choose = false
                            let _name = 'M'+item.coverageCode
                            if(this.MCoverage[_name]){
                                this.MCoverage[_name].choose = false
                            }
                            if(item.insuredAmount == 'Y'){
                                item.insuredAmount = 'N'
                            }else if(item.insuredAmount == 'N'){
                                item.insuredAmount = 'Y'
                            }else{
                                item.insuredAmount = 0.00
                            }
                            return item
                        }else{
                            return item
                        }
                    })
                    console.log(_list)
                }
            }
            
            
        },
        dateChange(value,obj,param){
            let _obj = obj ? obj : this
            _obj[param] = value
        },
        geteffectiveDate(){
            let _params = {
                licenseNo : this.stateCarinfo.licenseNo,
                brandCode : this.stateCarinfo.brandCode,
                isTrans : this.stateCarinfo.isTrans,
                cityCode: this.stateCarinfo.cityCode,
                firstRegisterDate : this.stateCarinfo.firstRegisterDate,
                frameNo: this.stateCarinfo.frameNo,
                engineNo: this.stateCarinfo.engineNo,
            }
            if(this.stateCarinfo.responseNo){
                 _params.responseNo = this.stateCarinfo.responseNo
            }
            new Promise((resolve, reject) => {
                effectiveDate(_params).then(response => {
                    console.log(response.data)
                    if(response.data.state == 1){
                        let _data = response.data.data
                        if(_data.ciStartDateFlag == 1){
                            this.ciStartDateFlag = true
                            this.ciBeginDatetime =  _data.ciStartTime
                            this.ciBeginDate =  _data.ciStartTime
                        }
                        if(_data.biStartDateFlag == 1){
                            // this.biStartDateFlag = true
                            this.biBeginDatetime =  _data.biStartTime
                            this.biBeginDate =  _data.biStartTime
                        }
                    }else{

                    }
                    resolve();
                }).catch(error => {
                    reject(error);
                });
            });
        },
        getArea(){
            let _params={
                insurerCode:'PAIC'
            }
            new Promise((resolve, reject) => {
                getAreas(_params).then(response => {
                    console.log(response.data)
                    if(response.data.state == 1){
            
                    }else{

                    }
                    resolve();
                }).catch(error => {
                    reject(error);
                });
            });
        },
        getCompany(){
            let _params={
                provinceCode:this.stateCarinfo.provinceCode
            }
            new Promise((resolve, reject) => {
                insurers(_params).then(response => {
                    console.log(response.data)
                    if(response.data.state == 1){
                        this.insurersList = response.data.data
                        this.insurersList.map(item=>{
                            item.itemText = '折叠隐藏'
                            item.renewInfo = false
                            item.choose = false
                        })
                        let _insurersListArry = response.data.data.map(item=>{
                            item.itemText = '折叠隐藏'
                            item.renewInfo = false
                            item.choose = false
                            return item
                        })
                        this.insurersListArry = _insurersListArry
                    }else{
                        this.insurersList = []
                    }
                    resolve();
                }).catch(error => {
                    reject(error);
                });
            });
        },
        getCoverage(){
            return new Promise((resolve, reject) => {
                risks().then(response => {
                    console.log(response.data)
                    if(response.data.state == 1){
                        this.coverageList = response.data.data
                        let _arry = []
                        let _obj = {}
                        let _relation = ['Z3','Z','X1','L','F']
                        this.coverageList.forEach(item=>{
                            if(item.coverageCode[0] !='M' && item.coverageCode !='FORCEPREMIUM'&& item.coverageCode !='R'&& item.coverageCode !='Z2'){
                                if(item.insuredAmount == 'Y'){
                                    item.choose = false
                                    this.insuredAmount = 'N'
                                }else if(item.insuredAmount == 'N'){
                                    item.choose = false
                                }else{
                                    item.choose = false
                                    item.insuredArray =item.insuredAmount.split(',')
                                    item.insuredAmount = item.insuredArray[0]
                                }
                                if(item.coverageCode == 'F' ){
                                    item.flag = "1"
                                }
                                if(item.coverageCode == 'Z3' || item.coverageCode == 'Z' || item.coverageCode == 'X1' || item.coverageCode == 'L' || item.coverageCode == 'F'){
                                    item.parent = 'A'
                                }
                                _arry.push(item)
                            }else if(item.coverageCode[0] =='M' && item.coverageCode !='MR'){
                                item.choose = false
                                _obj[item.coverageCode] = item
                            }
                        })
                        console.log(_arry)
                        console.log(_obj)
                        this.filterCoverage = _arry
                        this.MCoverage = Object.assign({},_obj)
                    }else{

                    }
                    resolve();
                }).catch(error => {
                    reject(error);
                });
            });
        },    
    }
}
</script>
